<template>
  <div class="container_report">
    <div class="selecting">
      <el-select
        popper-class="onlySelect"
        ref="selectDom"
        v-model="stoveValue"
        size="small"
        @change="chooseStove"
        placeholder="请选择报表"
      >
        <el-option
          v-for="item in options"
          :key="item.code"
          :label="item.code"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </div>
    <!-- <div class="cardsBorder"> -->
    <div style="padding: 0 12px">
      <div class="titleDetail" style="margin-top: 10px">
        炉号&nbsp;{{ this.stoNum }}
        <span
          style="color: rgba(211, 209, 209, 0.7); font-size: 14px; float: right"
        >
          {{ this.startTime }} 至 {{ this.endTime }}
        </span>
      </div>
      <!-- <div class="titleDetail">装炉<span style="color: rgba(211, 209, 209, 0.7);font-size: 14px;float: right">装炉支数: {{this.numbers}}支 | 总重: {{this.weights}}t | <el-link type="primary">详情</el-link></span></div> -->
      <div style="width: 95%; height: 205px; margin: 0 auto">
        <!-- <div class="titleDetail" style="margin-bottom: 5px">耗电情况</div> -->
        <!-- <div style="width: 95%; margin: auto; height: 110%"> -->
        <!-- <tables :redColor="true" :needCenter="false" :tableTypes="BoxTable" :tableData="BoxTable.tableCheckData" /> -->
        <table border="1">
          <tr class="table_key">
            <th>名称</th>
            <th>电度</th>
            <th>占比</th>
            <th>电价</th>
            <th>费用</th>
            <th>占比</th>
          </tr>
          <tr class="table_value" v-for="item in BoxTable.tableCheckData" :key="item.name">
            <td>{{item.name}}</td>
            <td>{{item.kwh}}</td>
            <td>{{item.kwhPercent}}</td>
            <td>{{item.price}}</td>
            <td>{{item.totalPrice}}</td>
            <td>{{item.pricePercent}}</td>
          </tr>
        </table>
        <!-- </div> -->
      </div>
    </div>
    <hr
      style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"
    />
    <!-- </div> -->
    <div style="padding: 0 12px">
      <div class="shiftClass">
        <div class="titleDetail" style="margin-bottom: 8px">功率位移趋势</div>
        <powerVsShift :whoUse="names" :chartsData="shiftTable"></powerVsShift>
      </div>
    </div>
    <hr
      style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"
    />
    <div style="padding: 0 12px">
      <div class="chartEvery">
        <div class="titleDetail">
          运行数据
          <div class="radioClass">
            <el-radio-group v-model="sourceRadio" @change="changeRadioChart">
              <el-radio label="炉阻">炉阻</el-radio>
              <el-radio label="电压">电压</el-radio>
              <el-radio label="电流">电流</el-radio>
              <el-radio label="温度">温度</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- <UIRchart style="height: 250px" v-for="item in ployData" :key="item[0][1]" :realData="item"></UIRchart> -->
        <reporEchart
          style="height: 250px"
          :realData="ployDataItem"
        ></reporEchart>
      </div>
    </div>
    <div v-for="(forms, index) in form" :key="forms._id">
      <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/>
      <div style="padding:12px">
        <div class="titleDetail" style="display:flex; align-items:center;justify-content:space-between;">
          <div>
          {{form.length===1? '装炉': ( stoveNumber[index]+'炉装炉')}}
          </div>
          <div>
            {{forms.stove.stoveTime}} / {{forms.stove.totalNumber}}支 / {{forms.stove.totalWeight}}吨
          </div>
        </div>
        <div class="code"></div>
        <div class="stoveReport_table">
          <div class="tableClass">
            <table>
              <tr class="table_key">
                <td>加工单位</td>
                <td>种类/规格</td>
                <td>数量</td>
                <td>长度</td>
                <td>单重</td>
                <td>重量</td>
              </tr>
              <tr class="table_value" v-for="item in forms.stove.stoveReport||[]" :key="item._id">
                <td>{{item.processUnit}}</td>
                <td>{{item.type}} {{item.specification}}</td>
                <td>{{item.number==0?'':item.number}}</td>
                <td>{{item.length==0?'':item.length}}</td>
                <td>{{item.singleWeight==0?'':item.singleWeight}}</td>
                <td>{{item.weight==0?'':item.weight}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/>
      <div style="padding:12px;">
        <div class="titleDetail">
          {{form.length===1? '送电': (stoveNumber[index]+'炉送电')}}
        </div>
        <div class="card-header card-header-center">
          <table>
            <tr class="table_key">
              <td colspan='2'>总第炉数</td>
              <td colspan='2'>送电开始功率</td>
              <td colspan='2'>计划电量</td>
              <td colspan='2'>计划电量</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.totalStoveNum}}</td>
              <td colspan='2'>{{forms.stove.electric.startPower}}</td>
              <td colspan='2'>{{forms.stove.electric.plannedElectricity}}</td>
              <td colspan='2'>{{forms.stove.electric.plannedElectricity}}</td>
            </tr>
            <tr class="table_key">
              <td colspan='2'>装炉柱数</td>
              <td colspan='2'>单柱串接</td>
              <td colspan='2'>截面</td>
              <td colspan='2'>电密</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.stoveColumnNum}}</td>
              <td colspan='2'>{{forms.stove.electric.oneColumnStrand}}</td>
              <td colspan='2'>{{forms.stove.electric.section}}</td>
              <td colspan='2'>{{forms.stove.electric.denseElectricity}}</td>
            </tr>
            <tr class="table_key">
              <td colspan='2'>位移要求</td>
              <td colspan='2'>配重</td>
              <td colspan='2'>保温料</td>
              <td colspan='2'>装炉方式</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.displacementLess}}</td>
              <td colspan='2'>{{forms.stove.electric.counterweight}}</td>
              <td colspan='2'>{{forms.stove.electric.keepWarmMaterial}}</td>
              <td colspan='2'>{{forms.stove.electric.stoveWay}}</td>
            </tr>
            <tr class="table_value" v-for="item in 4" :key="item" >
              <td colspan='2'>{{(item-1)*6}}-{{(item-1)*6+6}}h</td>
              <td>{{forms.stove.electric.powerTime[0 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[1 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[2 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[3 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[4 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[5 + (item-1)*6].power}}</td>
            </tr>
          </table>
        </div>
      </div>
      <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/>
      <div style="padding:12px; padding-bottom:24px;">
        <div class="titleDetail">
          {{form.length===1? '停电': ( stoveNumber[index]+'炉停电')}}
        </div>
        <div class="card-header card-header-center">
          <table>
            <tr class="talbe_key">
              <td colspan='2'>直流电压</td>
              <td colspan='2'>直流电流</td>
              <td colspan='2'>起始炉阻</td>
              <td colspan='2'>停电功率</td>
              <td colspan='2'>停炉炉阻</td>
              <td colspan='2'>吨耗</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.voltage==0?'':forms.stove.electric.voltage}}</td>
              <td colspan='2'>{{forms.stove.electric.electricCurrent==0?'':forms.stove.electric.electricCurrent}}</td>
              <td colspan='2'>{{forms.stove.electric.startStoveResistance==0?'':forms.stove.electric.startStoveResistance}}</td>
              <td colspan='2'>{{forms.stove.electric.stopPower==0?'':forms.stove.electric.stopPower}}</td>
              <td colspan='2'>{{forms.stove.electric.stopStoveResistance==0?'':forms.stove.electric.stopStoveResistance}}</td>
              <td colspan='2'>{{forms.stove.electric.tonConsumption==0?'':forms.stove.electric.tonConsumption}}</td>
            </tr>
            <tr class="talbe_key">
              <td colspan='2'>实际电量</td>
              <td colspan='2'>尖峰</td>
              <td colspan='2'>高峰</td>
              <td colspan='2'>平段</td>
              <td colspan='2'>谷电</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.actualElectricity==0?'':forms.stove.electric.actualElectricity}}</td>
              <td colspan='2'>{{forms.stove.electric.specialPowerTime[0].power==0?'':forms.stove.electric.specialPowerTime[0].power}}</td>
              <td colspan='2'>{{forms.stove.electric.specialPowerTime[1].power==0?'':forms.stove.electric.specialPowerTime[1].power}}</td>
              <td colspan='2'>{{forms.stove.electric.specialPowerTime[3].power==0?'':forms.stove.electric.specialPowerTime[3].power}}</td>
              <td colspan='2'>{{forms.stove.electric.specialPowerTime[2].power==0?'':forms.stove.electric.specialPowerTime[2].power}}</td>
            </tr>
          </table>
          <!-- <table>
            <tr class="table_key">
              <td colspan='2'>总第炉数</td>
              <td colspan='2'>送电开始功率</td>
              <td colspan='2'>计划电量</td>
              <td colspan='2'>计划电量</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.totalStoveNum}}</td>
              <td colspan='2'>{{forms.stove.electric.startPower}}</td>
              <td colspan='2'>{{forms.stove.electric.plannedElectricity}}</td>
              <td colspan='2'>{{forms.stove.electric.plannedElectricity}}</td>
            </tr>
            <tr class="table_key">
              <td colspan='2'>装炉柱数</td>
              <td colspan='2'>单柱串接</td>
              <td colspan='2'>截面</td>
              <td colspan='2'>电密</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.stoveColumnNum}}</td>
              <td colspan='2'>{{forms.stove.electric.oneColumnStrand}}</td>
              <td colspan='2'>{{forms.stove.electric.section}}</td>
              <td colspan='2'>{{forms.stove.electric.denseElectricity}}</td>
            </tr>
            <tr class="table_key">
              <td colspan='2'>位移要求</td>
              <td colspan='2'>配重</td>
              <td colspan='2'>保温料</td>
              <td colspan='2'>装炉方式</td>
            </tr>
            <tr class="table_value">
              <td colspan='2'>{{forms.stove.electric.displacementLess}}</td>
              <td colspan='2'>{{forms.stove.electric.counterweight}}</td>
              <td colspan='2'>{{forms.stove.electric.keepWarmMaterial}}</td>
              <td colspan='2'>{{forms.stove.electric.stoveWay}}</td>
            </tr>
            <tr class="table_value" v-for="item in 4" :key="item" >
              <td colspan='2'>{{(item-1)*6}}-{{(item-1)*6+6}}h</td>
              <td>{{forms.stove.electric.powerTime[0 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[1 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[2 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[3 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[4 + (item-1)*6].power}}</td>
              <td>{{forms.stove.electric.powerTime[5 + (item-1)*6].power}}</td>
            </tr>
          </table> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import tables from '@/components/tables/index.vue'
import powerVsShift from './powerVsShift.vue'
import reporEchart from './reporEchart.vue'
import { graphiteReportGet } from '@/api/graApi.js'
import { getReportData1 } from "../../api/minuteReportApi"
import { getReportData2 } from "../../api/minuteReportApi"
// import { getGraReportData } from '@/api/graApi'
export default {
  data () {
    return {
      options: [],
      stoveNumber: ['A', 'B', 'C'],
      stoveValue: '',
      sourceRadio: '炉阻',
      BoxTable: {
        stripe: false,
        formHead: [
          { 名称: 'name' },
          { '电度/%': 'kwh' },
          { 电价: 'price' },
          { '总价 / %': 'totalPrice' }
        ],
        tableCheckData: []
      },
      params1:{
        app:"stove"
      },
      names: '报表',
      numbers: '',
      weights: '',
      stoNum: '',
      startTime: '',
      endTime: '',
      shiftTable: [],
      ployData: [],
      ployDataItem: [],
      chartData: {},
      // 装炉
      form: {}
    }
  },
  components: {
    powerVsShift,
    // tables,
    reporEchart
  },
  created () {
    // this.$axios
    //   // .get('http://172.20.10.2/graReport/getHisStove')
    //   .get('http://81.70.155.101:8060/graReport/getHisStove?app=stove')
    //   .then((res) => {
    //     this.options = res.data.data
    //     this.stoveValue = this.options[0].code // 默认选中
    //     this.getDatas({
    //       stoveTitle: this.options[0].code
    //     })
    //     this.getData(this.options[0])
    //   })
    getReportData1(this.params1).then((res)=>{
      console.log(res,5675675675675675);
      this.options = res.data.data
        this.stoveValue = this.options[0].code // 默认选中
        this.getDatas({
          stoveTitle: this.options[0].code
        })
        this.getData(this.options[0])
    })
  },
  mounted () {},
  methods: {
    chooseStove (val) {
      // console.log('val', val) // 时间
      this.$nextTick(() => {
        const params = {
          stoveTitle: this.$refs.selectDom.selectedLabel
          // sendEleTime: val
        }
        this.getDatas(params)
      })
      let value = {}
      for (let index = 0; index < this.options.length; index++) {
        const element = this.options[index]
        const condition = element.code === val
        if (condition) {
          value = element
        }
      }
      this.getData(value)
    },
    getDatas (params) {
      console.log(params,"这是params");
      // this.$axios
      //   .get(
      //     `http://101.42.233.226:8060/graReport/getReportData=${params.stoveTitle}`
      //     // `http://192.168.240.216/graReport/getReportData?stoveTitle=${params.stoveTitle}`
      //   )
      //   .then((res) => {
      //     // console.log('报表数据', res.data)
      //     this.stoNum = res.data.data.stoveNumber
      //     this.startTime = res.data.data.startTime
      //     this.endTime = res.data.data.endTime
      //     this.BoxTable.tableCheckData = res.data.data.electricAmount
      //     this.shiftTable = res.data.data.powerAndDisplace.source
      //     // this.numbers = res.data.data.stockStove.number
      //     // this.weights = res.data.data.stockStove.weight
      //     this.chartData = JSON.parse(
      //       JSON.stringify(res.data.data.workingData)
      //     )
      //     this.ployDataItem = this.chartData.source4
      //     // for (var name in this.chartData) {
      //     //   this.$set(this.ployData, parseInt(name.charAt(name.length - 1)) - 1, this.chartData[name])
      //     // }
      //   })
      getReportData2(params).then((res)=>{
        console.log(res,123123123123123);
        this.stoNum = res.data.data.stoveNumber
          this.startTime = res.data.data.startTime
          this.endTime = res.data.data.endTime
          this.BoxTable.tableCheckData = res.data.data.electricAmount
          this.shiftTable = res.data.data.powerAndDisplace.source
          // this.numbers = res.data.data.stockStove.number
          // this.weights = res.data.data.stockStove.weight
          this.chartData = JSON.parse(
            JSON.stringify(res.data.data.workingData)
          )
          this.ployDataItem = this.chartData.source4
      })
    },
    // 获取装炉报告
    getData (code) {
      var startTime = code.startTime || ''
      var endTime = code.endTime || ''
      const payload = {
        startTime: startTime,
        endTime: endTime
      }
      graphiteReportGet(payload).then(res => {
        if (res.data.code === 200) {
          // console.log('装炉数据获取成功', res)
          var form = res.data.data.pageData || []
          // if (form.length && form.length === 2) {
          //   this.twoStove = true
          // } else if (form.length && form.length === 1) {
          //   this.twoStove = false
          // } else if (!form.length || form.length > 2) {
          // }
          this.form = form
        } else {
          this.$message({
            message: res.data.message
          })
        }
      })
    },
    changeRadioChart (val) {
      // console.log('hjkashdjkasn', val)
      const maps = new Map([
        ['炉阻', 'source4'],
        ['电压', 'source1'],
        ['电流', 'source2'],
        ['温度', 'source3']
      ])
      this.ployDataItem = this.chartData[maps.get(val)]
    }
  }
}
</script>
<style>
.onlySelect{
  margin-top: 0 !important;
}
</style>
